<template>
    <div class="questionnaire">
      <div class="header">
        <span class="tip">员工自检问卷</span>
      </div>
      <div class="info">
        <div class="info-top">
            <div class="info-left">
                <div class="info-item">
                    <span class="item-tip">零件名称:</span>
                    <span class="item-content">扫码自动读取</span>
                </div>
                <div class="info-item">
                    <span class="item-tip">零件编号:</span>
                    <span class="item-content">扫码自动读取</span>
                </div>
                <div class="info-item">
                    <span class="item-tip">工序名称:</span>
                    <span class="item-content">扫码自动读取</span>
                </div>
                <div class="info-item">
                    <span class="item-tip">图纸版本:</span>
                    <span class="item-content">扫码自动读取</span>
                </div>
                <div class="info-item">
                    <span class="item-tip">机台号:</span>
                    <span class="item-content">扫码自动读取</span>
                </div>
            </div>
            <div class="info-right">
                <icon-svg name="sweep" width="20vw" height="20vw" color="#1684fc"></icon-svg>
            </div>
        </div>
        <div class="info-item other">
            <div class="item-left">
                <span class="left-tip">班次:</span>
                <el-select  placeholder="请选择班次" size="mini" class="select">
                    <el-option label="白班" value="shanghai"></el-option>
                    <el-option label="夜班" value="beijing"></el-option>
                </el-select>
            </div>
            <div class="item-right">
                <span class="right-tip">检测人：</span>
                <span class="right-content">自动读取</span>
            </div>
        </div>
      </div>
      <div class="options">
        <div class="option-item" v-for="i in 4" :key="i">
            <div class="item-top">
                <span class="top-tip">尺寸特性</span>
                <span class="top-allselect">全选</span>
            </div>
            <div class="item-checkbox">
                <van-checkbox-group  direction="horizontal">
                    <van-checkbox name="a" shape="square" icon-size="16px" class="checkbox-item">复选框 a</van-checkbox>
                    <van-checkbox name="b" shape="square" icon-size="16px" class="checkbox-item">复选框 b</van-checkbox>
                    <van-checkbox name="b" shape="square" icon-size="16px" class="checkbox-item">复选框 c</van-checkbox>
                    <van-checkbox name="b" shape="square" icon-size="16px" class="checkbox-item">复选框 d</van-checkbox>
                    <van-checkbox name="b" shape="square" icon-size="16px" class="checkbox-item">复选框 e</van-checkbox>
                    <van-checkbox name="b" shape="square" icon-size="16px" class="checkbox-item">复选框 f</van-checkbox>
                </van-checkbox-group>
            </div>
            <div class="item-time">
                <span class="time-tip">检测时间:</span>
                <el-select  placeholder="8:00" size="mini" class="timeselect">
                    <el-option label="8:00" value="shanghai"></el-option>
                    <el-option label="22:00" value="beijing"></el-option>
                </el-select>
            </div>
        </div>
      </div>
      <div class="btns">
        <van-button type="info" size="small" class="btns-item">保存</van-button>
        <van-button type="info" size="small" class="btns-item">取消</van-button>
      </div>
    </div>
</template>

<script>
export default {
    name:'questionnaire',
}
</script>

<style lang="scss" scoped>
.questionnaire{
    width: 100vw;
    height: 100vh;
    .header{
        width: 100vw;
        height: 7vh;
        background-color: #4095e5;
        text-align: center;
        line-height: 7vh;
        color: white;
        font-size: 18px;
        font-weight: 500;
    }
    .info{
        width: 100vw;
        padding: 5px 10px;
        display: flex;
        flex-direction: column;
        border-bottom: dashed;
        border-width: 1px;
        border-color: #dcdcdc;
        .info-top{
            display: flex;
            align-items: center;
            .info-left{
                flex:3;
                .info-item{
                    display: flex;
                    .item-tip{
                        width: 20vw;
                        text-align: end;
                        margin-right: 8px;
                        font-size: 15px;
                    }
                    .item-content{
                        font-size: 15px;
                    }
                }
            }
            .info-right{
                flex:2;
            }
        }
        .other{
            margin: 5vw 5vw;
            display: flex;
            align-items: center;
            .item-left{
                display: flex;
                align-items: center;
                width: 40vw;
                margin-right: 10px;
                .select{
                    width: 30vw;
                }
            }
        }
    }
    .options{
        width: 100vw;
        padding: 0 8vw 0 3vw;
        display: flex;
        flex-direction: column;
        .option-item{
            width: 100%;
            margin: 1vh 0;
            .item-top{
                display: flex;
                justify-content: space-between;
                .top-tip{
                    font-size: 16px;
                    font-weight: 530;
                }
                .top-allselect{
                    font-size: 12px;
                    color: #4095e5;
                }
            }
            .item-checkbox{
                margin: 1vh 0;
                display: flex;
                flex-wrap: wrap;
                font-size: 3.5vw;
                .checkbox-item{
                    margin: 1vh 2vw;
                }
            }
            .item-time{
                display: flex;
                align-items: center;
                font-size: 14px;
                .timeselect{
                    width: 40vw;
                }
            }
        }
    }
    .btns{
        display: flex;
        justify-content: center;
        padding: 1vh 0;
        .btns-item{
            width: 20vw;
            margin: 0 2vw;
        }
    }
}
@media screen and (max-width: 768px) {
  
}
</style>